<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <hyCard title="分类图书数量(饼图)">
          <pieechart :peiData="categoryGoodsCoung"></pieechart>
        </hyCard>
      </el-col>
      <el-col :span="10">
        <hyCard title="不同城市图书销量(饼图)">
          <mapechart :mapData="addressGoodsSale" title="全国销量"></mapechart>
        </hyCard>
      </el-col>
      <el-col :span="7">
        <hyCard title="类别数据(玫瑰图)">
          <roseechart :areadata="categoryGoodsCoung"></roseechart>
        </hyCard>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="content-row">
      <el-col :span="12">
        <hyCard title="分类商品销量">
          <lineechart v-bind="categoryGoodsSale"></lineechart>
        </hyCard>
      </el-col>
      <el-col :span="12">
        <hyCard title="分类商品的收藏">
          <barechart v-bind="categoryGoodsFavor"></barechart>
        </hyCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  pieechart,
  roseechart,
  lineechart,
  barechart,
  mapechart,
} from "@/components/page-echart/index.js";
import baseEchart from "@/base-ui/echart/index.js";
import hyCard from "@/base-ui/card/";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "dashboard",
  components: {
    hyCard,
    baseEchart,
    pieechart,
    roseechart,
    lineechart,
    barechart,
    mapechart,
  },
  setup(props) {
    const store = useStore();

    store.dispatch("dashboread/getdashboardData");
    const categoryGoodsCoung = computed(() => {
      return store.state.dashboread.categoryGoodsCount.map((item) => {
        return {
          name: item.name,
          value: item.goodscount,
        };
      });
    });
    const categoryGoodsSale = computed(() => {
      const xLabels = [];
      const values = [];
      const categoryGoodsSale = store.state.dashboread.categoryGoodsSale;
      for (const item of categoryGoodsSale) {
        xLabels.push(item.name);
        values.push(item.sales);
      }
      return { xLabels, values };
    });
    const categoryGoodsFavor = computed(() => {
      const xLabels = [];
      const values = [];
      const categoryGoodsFavor = store.state.dashboread.categoryGoodsFavor;
      for (const item of categoryGoodsFavor) {
        xLabels.push(item.name);
        values.push(item.favor);
      }
      return { xLabels, values };
    });
    const addressGoodsSale = computed(() => {
      return store.state.dashboread.addressGoodsSale.map((item) => {
        return {
          name: item.address,
          value: item.count,
        };
      });
    });
    return {
      categoryGoodsCoung,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale,
    };
  },
};
</script>

<style lang="scss" scope>
.dashboard {
  height: 100%;
  overflow-x: hidden;
  &_body {
    width: 500px;
    height: 500px;
  }
}
.content-row {
  margin-top: 20px;
}
.el-card__body {
  padding: 20px 10px 10px;
}
</style>
